<template>
  <div class="login-container">
    <el-form ref="form" :model="form" :rules="registerRules" class="login-form" auto-complete="on" label-position="left">
      <div class="title-container">
        <h3 class="title">欢迎注册</h3>
      </div>

      <el-form-item prop="name">
        <el-input
          v-model="form.name"
          placeholder="用户名"
          name="name"
          type="text"
        >
          <span slot="prefix" class="svg-container"><svg-icon icon-class="user" /></span>
        </el-input>
      </el-form-item>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="password">
            <el-input
              v-model="form.password"
              :type="passwordType"
              placeholder="密码"
              name="password"
              auto-complete="on"
            >
              <span slot="prefix" class="svg-container"><svg-icon icon-class="password" /></span>
            </el-input>
            <span class="show-pwd" @click="showPwd">
              <svg-icon icon-class="eye" />
            </span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item prop="password2">
            <el-input
              v-model="form.password2"
              :type="passwordType"
              placeholder="重复密码"
              name="password"
              auto-complete="on"
            >

              <span slot="prefix" class="svg-container"><svg-icon icon-class="password" /></span>
            </el-input>
            <span class="show-pwd" @click="showPwd">
              <svg-icon icon-class="eye" />
            </span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item prop="phone">
            <el-input v-model="form.phone" type="text" placeholder="手机" />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item>
            <el-input v-model="form.qq" type="text" placeholder="qq" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-select v-model="form.college" @change="handleCollegeChange">
            <el-option v-for="item in colleges" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
        <el-col :span="12">
          <el-select v-model="form.mid">
            <el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item>
            <el-radio-group v-model="form.type">
              <el-radio label="1">我是老师</el-radio>
              <el-radio label="2">我是学生</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item v-show="form.type == 2" prop="sno">
            <el-input
              v-model="form.sno"
              placeholder="学号"
              name="sno"
              type="text"
            >
              <span slot="prefix" class="svg-container"><svg-icon icon-class="mobile" /></span>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-button
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="handleRegister"
      >
        立即注册
      </el-button>

      <el-row style="text-align:center;">
        <el-button type="text" @click="login">已有账号？立即登陆</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getCollges, getMajors } from '@/api/colleges'
import { register } from '@/api/user'

export default {
  name: 'Register',
  data() {
    const rules = {
      name: (rule, value, callback) => {
        if (value.length < 2) {
          callback(new Error('用户名不能少于2个字符'))
        } else {
          callback()
        }
      },

      password: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能少于6个字符'))
        } else {
          callback()
        }
      },

      password2: (rule, value, callback) => {
        if (value.length < 6) {
          callback(new Error('密码不能少于6个字符'))
        } else if (value !== this.form.password) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      },

      sno: (rule, value, callback) => {
        if (this.form.type == '2') {
          if (!value) {
            callback(new Error('学号必须输入！'))
          }
        }
        callback()
      },

      checkPhone: (rules, value, callback) => {
        var regex = /^1[3-9][0-9]{9}$/
        if (!regex.test(value)) {
          callback(new Error('非法的手机号！'))
        } else {
          callback()
        }
      }
    }

    return {
      colleges: [
      ],

      majors: [],

      form: {
        type: '1',
        name: '',
        phone: '',
        qq: '123',
        college: '',
        mid: ''
      },
      registerRules: {
        name: [{ required: true, trigger: 'blur', message: '请输入用户名' }, { validator: rules.name }],
        password: [{ required: true, trigger: 'blur', message: '请输入密码' }, { validator: rules.password }],
        password2: [{ required: true, trigger: 'blur', message: '请输入密码' }, { validator: rules.password2 }],
        phone: [
          { required: true, trigger: 'blur', message: '请输入手机号' },
          { validator: rules.checkPhone, trigger: 'blur' }
        ],
        sno: [{ validator: rules.sno }]
      },
      passwordType: 'password',
      loading: false
    }
  },

  // 生命周期钩子函数
  created() {
    getCollges().then(res => {
      console.log(res)
      this.colleges = res.data.data
    })
  },

  mouted() {

  },

  destroyed() {
  },

  methods: {
    // 下拉框切换事件
    handleCollegeChange(value) {
      // console.log(value)
      getMajors(value).then(res => {
        console.log(res)
        this.majors = res.data.data
      })
    },

    onTypeChange(type) {
      this.isSnoVisible = (type == '2')
    },

    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
    },
    handleRegister() {
      console.log(this.form)

      this.$refs.form.validate(valid => {
        if (!valid) {
          return false
        }

        // 发请求
        register(this.form).then(res => {
          console.log(res)

          // element-ui
          this.$message({
            message: '注册成功！！！！',
            type: 'success'
          })

          // 跳转到登录界面
          this.$router.push({
            path: '/login'
          })
        })
      })
    },

    login() {
      this.$router.push({ path: './login' })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
$bg:#2d3a4b;
$dark_gray:#889aa4;
$light_gray:#eee;
$cursor: #fff;

.login-container {
  position: fixed;
  height: 100%;
  width: 100%;
  overflow: auto;
  // background-color: $bg;

  .login-form {
    border-radius: 8px;
    border: 1px solid #eaeaea;
    box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);
    position: absolute;
    left: 0;
    right: 0;
    width: 520px;
    padding: 35px 35px 15px 35px;
    margin: 80px auto;
  }

  .svg-container {
    color: $dark_gray;
    vertical-align: middle;
    width: 25px;
    display: inline-block;
  }

  .title-container {
    position: relative;
    .title {
      font-size: 26px;
      color: $dark_gray;
      margin: 0px auto 40px auto;
      text-align: center;
      font-weight: bold;
    }
  }
  .show-pwd {
    position: absolute;
    right: 10px;
    top: 0px;
    font-size: 16px;
    color: $dark_gray;
    cursor: pointer;
    user-select: none;
  }
}
</style>
